import FormData from "../../../types/FormData";
import GridProps from "./GridProps";
import {ComponentProps, VueComponent} from "vue3-oop";
import {NInput, NCollapse, NCollapseItem, NFormItem, NInputNumber, NSelect, NRadioGroup, NRadioButton} from "naive-ui";

interface IProps {
  formData: FormData,
  widgetProps: GridProps
}
export default class GridConfig extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    formData: {},
    widgetProps: {}
  }

  render() {
    const { formData, widgetProps } = this.props;
    return(
      <NCollapse>
        <NCollapseItem name="BASIC" title="基本属性">
          <NFormItem label="组件标识">
            <NInput disabled value={widgetProps.widgetId}/>
          </NFormItem>
          <NFormItem label="组件类型">
            <NInput disabled value={widgetProps.widgetLabel}/>
          </NFormItem>
        </NCollapseItem>
        <NCollapseItem name="LAYOUT" title="布局属性">
          <NFormItem label="组件宽度">
            <NInputNumber
              value={widgetProps.layout_reactive.span} min={1} max={24}
              onUpdateValue={(value)=>{widgetProps.layout_reactive.span=value||12;}}
            />
          </NFormItem>
          <NFormItem label="默认状态">
            <NSelect
              value={widgetProps.layout_status}
              options={[{ label: '隐藏', value: '0' }, { label: '占位', value: '1' }, { label: '可见', value: '2' }]}
              onUpdateValue={(value) => {widgetProps.layout_status=value}}
            />
          </NFormItem>
        </NCollapseItem>
        <NCollapseItem name="GRID" title="栅格属性">
          <NFormItem label="默认宽度">
            <NInputNumber
              value={widgetProps.defaultSpan} min={1} max={24}
              onUpdateValue={(value)=>{widgetProps.defaultSpan=value||1;}}
            />
          </NFormItem>
          <NFormItem label="水平间隔">
            <NInputNumber
              value={widgetProps.gaps.x} min={0} max={100}
              onUpdateValue={(value)=>{widgetProps.gaps.x=value||0;}}
            />
          </NFormItem>
          <NFormItem label="垂直间隔">
            <NInputNumber
              value={widgetProps.gaps.y} min={0} max={100}
              onUpdateValue={(value)=>{widgetProps.gaps.y=value||0;}}
            />
          </NFormItem>
          <NFormItem label="标签宽度">
            <NInputNumber
              value={widgetProps.labelWidth} min={50} max={500}
              onUpdateValue={(value)=>{widgetProps.labelWidth=value||50;}}
            />
          </NFormItem>
          <NFormItem label="标签对齐">
            <NRadioGroup size="small" value={widgetProps.labelAlign} onUpdateValue={(value)=>{widgetProps.labelAlign=value}}>
              <NRadioButton value="left" label="左"/>
              <NRadioButton value="right" label="右"/>
            </NRadioGroup>
          </NFormItem>
        </NCollapseItem>
      </NCollapse>
    )
  }
}